<template>
  <div class="container">
    <!-- 短信记录 -->
    <!-- 查询条件 -->
    <el-form :inline="true" class="tableSearchBox" size="medium">
      <el-form-item label="接收人：">
        <el-input v-model="search.name" placeholder="请输入姓名或者手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="发送时间：">
        <el-date-picker v-model="search.time" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- /查询条件 -->
    <PagesTable :tableHeader="tableHeader" :tableData="tableData" :tableOperation="tableOperation"
      :tablePagination="tablePagination" @pageSize="pageSizeChange" @currentPage="currentPageChange"
      @pageOperation="handlePageOperation" />
  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable
    },
    data() {
      return {
        search: {
          name: "",
          time: ["", ""], //开始和结束时间
        },
        tableHeader: [{
            name: "序号",
            mark: "index",
            minWidth: "90"
          },
          {
            name: "姓名",
            mark: "name",
            minWidth: "90"
          }, {
            name: "手机号",
            mark: "phone",
            minWidth: "90"
          },
          {
            name: "短信内容",
            mark: "content",
            minWidth: "190"
          },
          {
            name: "发送时间",
            mark: "time",
            minWidth: "90"
          },
          {
            name: "发送状态",
            mark: "status",
            minWidth: "90"
          },
          {
            name: "短信类型",
            mark: "type",
            minWidth: "90"
          },
          {
            name: "操作",
            mark: "",
            minWidth: "90"
          },
        ],
        tableOperation: [{
          name: "重新发送",
          mark: "refresh-right",
          icon: true
        }],
        tablePagination: {
          show: true,
          current: 1,
          size: 10,
          total: 2
        },
        tableData: [{
          index: "1",
          name: "白秀珍",
          phone: "13099046355",
          content: "你好，新华书店宿舍小区将于07月20日下午停水半天，请做好准备！",
          time: "2024-07-18",
          status: "已发送",
          type: "小区通知",
        }, {
          index: "2",
          name: "边峰秀",
          phone: "13546317653",
          content: "你好，新华书店宿舍小区将于07月20日下午停水半天，请做好准备！",
          time: "2024-07-18",
          status: "已发送",
          type: "小区通知",
        }],
      }
    },
    mounted() {
      this.getData()
    },
    beforeDestroy() {},
    created() {},
    methods: {
      getData() {
        // this.tableData=[{}]
      },
      pageSizeChange(data) {
        const self = this
        self.tablePagination.size = data
        self.getData()
      },
      currentPageChange(data) {
        const self = this
        self.tablePagination.current = data
        self.getData()
      },
      handlePageOperation(row, mark) {
        const self = this;
        if (mark == "edit") {
          // self.addDeviceVisible = true;
          // self.isAddDev = false;

          //给表单赋值......
        } else if (mark == "delete") {
          this.$confirm('确定要删除此记录吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.delectById(row.id);
          }).catch(() => {});
        }
      },
      delectById(id) { //删除
      },
    }
  }
</script>
<style lang="scss" scoped>

</style>